<template>
  <view
    class="patient-infor"
    v-for="(item, index) in patient"
    :key="index"
    @click="checkedData(item.name, item._id)"
  >
    <view class="patient-flex">
      <text class="patient-name">{{ item.name }}</text>
      <text class="patient-text">{{ item.relation }}</text>
    </view>
    <view class="patient-flex patient-sex">
      <text>{{ item.sex }}</text>
      <text>{{ item.age }}岁</text>
      <text>{{ item.phone }}</text>
    </view>
  </view>
  <!-- 提交 -->
  <view class="submit">
    <text @click="canCel">取消</text>
    <text @click="addTo">添加就诊人</text>
  </view>
  <ponit :show="show" :title="title" />
  <view style="height: 300rpx"></view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import RequestApi from "@/public/rquest";
import type { Mypatient } from "@/public/decl-type";
// 公用提示组件
import ponit from "@/com-components/point.vue";
import { myData } from "@/store/index";

let show = ref(false);
let title = ref("你还没有就诊人");

// 请求数据
interface Resdata {
  data: { data: [] };
}
let patient = ref<Mypatient[]>([]);
onShow(async () => {
  const res = (await RequestApi.GetpaTient()) as Resdata;
  patient.value = res.data.data;
  if (res.data.data.length == 0) {
    show.value = true;
  }
});

// 选择就诊人返回上一界面
const store = myData();
function checkedData(name: string, _id: string) {
  store.addPatient({ name, _id });
  uni.navigateBack({ delta: 1 });
}

// 取消
function canCel() {
  uni.navigateBack({ delta: 1 });
}
// 添加就诊人
function addTo() {
  console.log(123);

  uni.navigateTo({
    url: "/pages/my-service/my-patient/add-patient",
  });
}
</script>

<style>
@import url("../../../common-style/form.css");
page {
  background-color: #f6f6f6;
}
.patient-infor {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 15rpx;
  font-size: 28rpx;
}
.patient-flex {
  display: flex;
  align-items: center;
  padding: 20rpx;
}
.patient-name {
  font-size: 35rpx;
  font-weight: bold;
}
.patient-flex text {
  margin-right: 15rpx;
}
.patient-text {
  background-color: #d6f3ff;
  color: #78beff;
  padding: 2rpx 15rpx;
}
.patient-sex {
  color: #7c96af;
}
</style>
